<template>
    <div>
        <a-tree
            :tree-data="treeData"
            :replace-fields='replaceFields'
            :defaultExpandAll='true'
            :key='key'
        >
            <template slot="custom" slot-scope="item">
                <div class='custom-node'>
                    <span class='name' @click='getTable(item)' :class="{'is-selected': currentNode.id === item.id}" :title='item.name'>{{ item.name }}</span>
                    <a-popover placement="bottomRight" overlayClassName='tree-popover-opera-btn' trigger="click">
                        <template slot="content">
                            <div class='popover-btn' v-if='item.tier !== 2' @click='addDepartment(item)'><a-icon type="plus" />添加子部门</div>
                            <div class='popover-btn' v-if='item.tier !== 0' @click='editDepartment(item)'><a-icon type="edit" />编辑</div>
                            <div class='popover-btn' v-if='item.tier !== 0' @click='deleteDepartment(item)'><a-icon type="delete" />删除</div>
                        </template>
                        <a-icon type="more" v-if='item.tier !== 0' />
                    </a-popover>
                    <div class='popover-btn add-btn' v-if='item.tier === 0' @click='addDepartment(item)'>添加</div>
                </div>
            </template>
        </a-tree>
        <a-modal
            :title="isEdit ? '编辑部门' : '添加部门'"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            @cancel="handleCancel"
        >
            <a-form-model
                ref="ruleForm"
                :model="form"
                :rules="rules"
            >
                <a-form-model-item label='名称' prop='name'>
                    <a-input v-model='form.name'></a-input>
                </a-form-model-item>
            </a-form-model>
        </a-modal>
    </div>
</template>

<script>
export default {
    name: 'PersonnelTree',
    data () {
        return {
            treeData: [],
            replaceFields: {
                children: 'children',
                title: 'name',
                key: 'id'
            },
            visible: false,
            confirmLoading: false,
            form: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入部门名称', trigger: 'blur' }
                ]
            },
            // 操作节点
            nowNode: {},
            // 选中节点
            currentNode: {},
            key: 0,
            isEdit: false
        }
    },
    created () {
        this.getTree()
    },
    methods: {
        getTable (item) {
            this.currentNode = item
            this.$emit('getTable', item)
        },
        handleOk () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    this.confirmLoading = true
                    const url = this.isEdit ? 'personnel/editDepartment' : 'personnel/addDepartment'
                    const data = this.isEdit
                        ? {
                            id: this.nowNode.id,
                            name: this.form.name,
                            parentId: this.nowNode.parentId
                        }
                        : {
                            parentId: this.nowNode.id,
                            name: this.form.name,
                            tier: this.nowNode.tier + 1
                        }
                    const res = await this.$ApiServer[url](data)
                    if (res.code === 200) {
                        this.isEdit = false
                        this.$message.success(res.message)
                        this.confirmLoading = false
                        this.$refs.ruleForm.resetFields()
                        this.nowNode = {}
                        this.visible = false
                        this.getTree()
                    } else {
                        this.confirmLoading = false
                        this.$message.error(res.message)
                    }
                }
            })
        },
        handleCancel () {
            this.$refs.ruleForm.resetFields()
            this.nowNode = {}
            this.visible = false
        },
        addDepartment (item) {
            this.visible = true
            this.nowNode = item
        },
        editDepartment (item) {
            this.visible = true
            this.nowNode = item
            this.isEdit = true
            this.form.name = item.name
        },
        deleteDepartment (item) {
            this.$confirm({
                title: '提示',
                content: `确认是否删除部门[${item.name}]`,
                okText: '确认',
                cancelText: '取消',
                onOk: async () => {
                    const res = await this.$ApiServer['personnel/deleteDepartment']({
                        id: item.id
                    })
                    if (res.code === 200) {
                        this.getTree()
                    } else {
                        this.$message.error(res.message)
                    }
                },
                onCancel () {}
            })
        },
        async getTree () {
            const res = await this.$ApiServer['personnel/getTree']()
            if (res.code === 200) {
                const add = (list) => {
                    list.forEach((item) => {
                        item.scopedSlots = { title: 'custom' }
                        if (item.children && item.children.length) {
                            item.children = add(item.children)
                        }
                    })
                    return list
                }
                this.treeData = add(res.data)
                this.currentNode = this.treeData[0]
                this.key++
                this.$emit('getTable', this.treeData[0])
            }
        }
    }
}
</script>

<style scoped lang='less'>
::v-deep {
    .ant-tree-node-content-wrapper {
        width: calc(100% - 24px);
        background: #fff!important;
        height: 40px!important;
        line-height: 40px!important;
        .ant-tree-title {
            width: 100%;
        }
        .custom-node {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 50px;
            .name {
                width: 100%;
                display: inline-block;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                -o-text-overflow: ellipsis;
            }
            .anticon {
                color: #37383a;
            }
            .is-selected {
                color: #2A2A2A ;
            }
        }
      &.ant-tree-node-selected {
            background: #fff;
        }
        &:hover {
            background: #fff!important;
        }
    }
  .add-btn{
    width: 60px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: @primary-color;
    border-radius: 2px;

    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
  }
  .ant-tree-switcher{
    height: 40px!important;
    line-height: 40px!important;
  }
}
</style>
